<template>
	<scroll-view scroll-x class="song_list_scroll" scroll-with-animation :scroll-into-view="'site' + getIndex">
		<view class="scroll_content">
			<view class="scroll_item" :id="'site' + index" :class="curSortIndex === index?'actived':''" @click="toggleSort(index)"
				v-for="(tag, index) in sortList" :key="tag.id">
				{{tag.name}}
				<view class="bg_active" v-show="curSortIndex === index"></view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			sortList: {
				default: [],
				type: Array
			},
			curSortIndex: {
				type: Number,
				default: 0
			}
		},
		computed: {
			getIndex() {
				return (this.curSortIndex - 2) >= 0 ? this.curSortIndex - 1 : 0
			}
		},
		methods: {
			//点击某个歌单分类时触发
			toggleSort(index) {
				// this.curSortIndex = index
				this.$emit('changeIndex', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.song_list_scroll {
		width: 91%;
		height: 60rpx;
		line-height: 60rpx;
		/* 解决滚动条的问题 => 隐藏滚动条*/
		::-webkit-scrollbar {
			display: none;
		}
		.scroll_content {
			display: flex;
			width: 100%;
			.scroll_item {
				padding: 0 10rpx;
				margin-right: 40rpx;
				color: #6b6b6b;
				font-size: 32rpx;
				white-space: nowrap;
				position: relative;
				&.actived {
					color: black;
					font-weight: bold;
				}
				.bg_active {
					width: 100%;
					position: absolute;
					left: 0;
					bottom: 8rpx;
					z-index: -1;
					opacity: .9;
					height: 17rpx;
					border-radius: 17rpx;
					background-color: #ee5659;
				}
			}
		}
	}
</style>
